<template>
  <div class="layout-container" style=" max-width:100%;align-items: center;">
    <el-drawer v-model="dialog" :title="drawer_title" direction="rtl">
      <div class="demo-drawer__content">
        <el-form :model="form">
          <el-form-item label="静态参数名">
            <el-input v-model="form.param_name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="静态参数值">
            <el-input v-model="form.param_value" autocomplete="off" />
          </el-form-item>
          <el-form-item label="数据类型">
            <el-select v-model="form.param_type" placeholder="请选择数据类型">
              <el-option label="string" value="string"></el-option>
              <el-option label="number" value="number"></el-option>
              <el-option label="bool" value="bool"></el-option>
            </el-select>
          </el-form-item>


          <el-button type="primary" @click="addDefaultParam">保存</el-button>

          <el-button type="primary" @click="dialog = false">取消</el-button>
        </el-form>

      </div>
    </el-drawer>


    <h2>教学平台参数设置</h2>

    <el-descriptions class="description_table" :column="1" size="large" border>
      <el-descriptions-item label="默认学校" label-align="left" align="right">
        <el-select allow-create filterable v-model="defaultParams.school" placeholder="请选择学校" style="width:200px;">
          <el-option v-for="item in schoolList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-descriptions-item>
    </el-descriptions>


    <!-- <h2>在线实验容器参数设置</h2> -->

    <el-descriptions class="description_table" :column="1" size="large" border>

      <el-descriptions-item label="容器内文件备份数量" label-align="left" align="right">
        <el-input type="number" v-model="defaultParams.backup_count" placeholder="请输入备份数量" style="width:200px;" />
      </el-descriptions-item>

      <el-descriptions-item label="容器内文件备份间隔(分钟)" label-align="left" align="right">
        <el-input type="number" v-model="defaultParams.backup_interval_minutes" placeholder="请输入时间间隔"
          style="width:200px;" /> </el-descriptions-item>

    </el-descriptions>





    <el-descriptions class="description_table" :column="1" size="large" border>

      <el-descriptions-item label="学生容器所在命名空间" label-align="left" align="right">
        <el-select v-model="defaultParams.working_namespace" placeholder="请选择命名空间" style="width:200px;"></el-select>
      </el-descriptions-item>

      <el-descriptions-item label="检查并删除僵尸容器的时间间隔(分钟) " label-align="left" align="right">
        <el-input type="number" v-model="defaultParams.check_zombie_interval_minutes" placeholder="请输入时间间隔"
          style="width:200px;" />
      </el-descriptions-item>

      <el-descriptions-item label="集群自动删除僵尸容器" label-align="left" align="right">
        <el-switch v-model="defaultParams.auto_scheduling" active-color="#13ce66" inactive-color="#ff4949" />
      </el-descriptions-item>
    </el-descriptions>


    <!-- <h2>静态数据</h2> -->
    <el-descriptions class="description_table" :column="1" size="large" border>

      <el-descriptions-item v-for="( value, key) in staticParams" :key="key" :label="key" label-align="left"
        align="right">
        {{ value }}<el-button type="primary" link @click="handleEditStaticParam(key)">编辑</el-button> <el-button
          type="primary" link @click="handleDeleteStaticParam(key)">删除</el-button>
      </el-descriptions-item>



    </el-descriptions>


    <!-- 还需要显示的东西 -->
    <!-- 1、后端头像路径 -->
    <!-- 2、后端文件路径 -->
    <!-- 3、后端ip:端口 -->
    <!-- 4、前端ip:端口 -->
    <div>
      <el-button type="primary" size="default" @click="handleSave">保存</el-button>
      <el-button type="primary" size="default" @click="handleAddStaticParam">添加默认参数</el-button>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { saveDefaultParamsApi, getDefaultParamsApi, addDefaultParamApi, handleDeleteStaticParamApi } from '@/api/clusterManagement'
import { ElMessage, ElMessageBox } from 'element-plus'
onMounted(() => {
  getDefaultParamsApi().then(res => {
    console.log(res)
    defaultParams.value = res.data.defaultParams
    schoolList.value = []
    for (let i = 0; i < res.data.schoolList.length; i++) {
      schoolList.value.push({
        label: res.data.schoolList[i],
        value: res.data.schoolList[i]
      })
    }
    staticParams.value = res.data.staticParams
  })
})


const schoolList = ref([])
const defaultParams = ref({
  school: '',
  backup_count: 0,
  backup_interval_minutes: 0,
  working_namespace: '',
  check_zombie_interval_minutes: 0,
  auto_scheduling: false,

})
const staticParams = ref({})
const dialog = ref(false)
const form = ref({
  before_name: '',
  param_name: '',
  param_value: '',
  param_type: 'string',
  is_add: true,
})
const drawer_title = ref('添加默认参数')
const addDefaultParam = () => {
  if (drawer_title.value === '添加默认参数') {
    form.value.is_add = true
  } else {
    form.value.is_add = false
  }
  addDefaultParamApi(form.value).then((res: any) => {
    console.log(res)
    dialog.value = false
    location.reload()
    ElMessage.success(`${drawer_title.value}成功`)
  })
}
const handleAddStaticParam = () => {
  form.value.before_name = ''
  form.value.param_name = ''
  form.value.param_value = ''
  dialog.value = true
  drawer_title.value = '添加默认参数'
}
const handleEditStaticParam = (key: any) => {
  form.value.before_name = key
  form.value.param_name = key
  form.value.param_value = staticParams.value[key]
  dialog.value = true
  drawer_title.value = '编辑默认参数'
}
const handleDeleteStaticParam = (key: any) => {
  ElMessageBox.confirm('确认删除该参数？').then(() => {
    handleDeleteStaticParamApi({ param_name: key }).then((res: any) => {
      if (res.code === 200) {
        location.reload()
        ElMessage.success('删除成功')
      }
    })
  })
}
const handleSave = () => {

  saveDefaultParamsApi(defaultParams.value).then(res => {
    console.log(res)
    ElMessage.success('保存成功')
  })
}

</script>


<style lang="scss" scoped>
.description_table {
  // display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px;
  max-width: 600px;
  width: 600px;
}
</style>